<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="full-screen" content="yes">
    <meta name="x5-fullscreen" content="true">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="../../css/base.css">
    <link rel="stylesheet" href="../../css/pop-ups.css"><!--弹出层-->
    <link rel="stylesheet" href="../../css/icon-font.css"/><!--图标-->
    <link rel="stylesheet" href="../../css/comment.css"/><!--图标-->
    <title>更多回复</title>
    <style>
        body {
            background-color: #F7F7F7;
        }

        .comment-more-head {
            height: 0.6rem;
            width: 0.6rem;
        }

        .comment-more-head img {
            height: 100%;
            width: 100%;
            border-radius: 1rem;
        }

        .comment-more-user {
            color: #222222;
        }

        .comment-more-del-wrap {
            height: 0.3rem;
        }

        .comment-more-del {
            height: 0.06rem;
            width: 0.06rem;
            background-color: #999999;
            margin-left: 0.06rem;
            border-radius: 1rem;
        }

        .comment-more-content {
            color: #222222;
            padding: 0.2rem 0 0.24rem 0;
            line-height: 0.42rem;
            max-width: 6rem;
            word-break: break-all;
        }

        .comment-more-reply-content {
            color: rgba(34, 34, 34, 0.7);
            padding: 0.2rem 0 0.24rem 0;
            line-height: 0.44rem;
            max-width: 5.8rem;
            word-break: break-all;
        }

        .comment-more-time {
            color: rgba(34, 34, 34, 0.45);
        }

        .comment-more-reply-icon {
            margin-left: 0.76rem;
        }

        .comment-more-input-wrap {
            height: 1.5rem;
            width: 7.5rem;
            background-color: white;
            position: fixed;
            bottom: 0;
        }

        .comment-more-input {
            margin: 0.18rem 0.32rem;
            border-radius: 0.08rem;
            background-color: #F6F6F6;
            height: 0.64rem;
            line-height: 0.64rem;
            padding-left: 0.28rem;
            color: rgba(34, 34, 34, 0.45);
        }

        .comment-more-line {
            height: 0.16rem;
            width: 100%;
            background-color: #F7F7F7;
        }

    </style>
</head>
<body>

<div class="flex-column ff400 fs14 h-100-p comment-more" style="background: white;">
    <div class="placeholder-top">
        <!--状态栏-->
        <div class="bg-main status-bar pos-f"></div>
        <!--导航栏-->
        <div class="bg-main nav-bar pos-f flex-row justify-content-between c-white align-items-center">
            <div class="left-bar" onclick="clickBack()">
                <span class="iconfont iconfanhui1 fs16"></span>
            </div>
            <div class="center-bar fs16 ff500 line1">更多回复</div>
            <div class="right-bar">
            </div>
        </div>
    </div>
    <div class="flex-column pd1620">
        <div class="comment-more-wrap flex-row">

        </div>
    </div>
    <!--全部回复-->
    <div class="comment-more-line"></div>

    <!--全部回复主体-->
    <div class="flex-column pd1620  flex-1 scoll-y scoll-area">
        <div class="fs16 ff600" style="color: #222222;">全部回复</div>
        <div class="comment-more-reply-wrap">

        </div>
    </div>


    <div class="comment-area">
    </div>

    <div class="comment-del-area">

    </div>
</div>


</body>
<!--这四个文件的引入必须按照顺序-->
<script src="../../js/dict.js"></script>
<script src="../../js/jquery-3.4.1.min.js"></script>
<script src="../../js/checkJsBridge.js"></script>
<script src="../../js/utils.js"></script>
<script src="../../js/api.js"></script>
<!--这四个文件的引入必须按照顺序-->
<script src="../../js/date.js"></script>
<script src="../../js/icon-font.js"></script><!--用于彩色字体图标-->
<script src="../../js/template.js"></script>
<script>
  let pm = {
    pageNum: 1,  //当前页
    pageSize: 10,
    isScroll: false,
    defaultImg: '../../images/user/user-comment.png',
    userId: '',
    infoId: '',
    datasource: 2,
    isLogin: false
  }

  function initPage(params) {
    //状态栏自适应
    Utils.sbhAdaptive()
    pm.isLogin = !user.isGuest
    pm.infoId = params.infoId
    pm.infoType = params.infoType
    pm.commentId = params.commentId
    $('.comment-more-reply-wrap').html('')
    getTopComment() //获取主评论
    getComments()// 获取子评论
    Template.pageScrollDiv(getComments)
  }

  function reLoadPage() {
    pm.pageNum = 1
    pm.isScroll = false
    pm.userId = ''
    pm.isLogin = !user.isGuest
    $('.comment-more-reply-wrap').html('')
    getTopComment() //获取主评论
    getComments()// 获取子评论
    Template.pageScrollDiv(getComments)
  }

  function getTopComment() {
    Server.commentMore.getComments({
      objectSource: pm.infoType,
      commentObjectId: pm.infoId,
      commentId: pm.commentId,
      pageNum: 1,
      pageSize: 1
    }).then(function (data) {
      let htmlStr = ''
      if (data.list && data.list.length > 0) {
        pm.userId = data.id
        let dataItem = data.list[0]
        // if (pm.userId !== dataItem.userId) { // 只有该条评论不是该用户写的才可以对该评论输入
        $('.comment-area').html(Template.commentDetail(1, 1, 1, 1))
        // }

        let jsonStr = {
          commentId: dataItem.commentId,
          userName: dataItem.userName,
          isLike: dataItem.isLike
        }
        htmlStr += '<div class=\'comment-more-head mr10\'><img src=\' ' + (dataItem.headUrl ? dataItem.headUrl : pm.defaultImg) + ' \'/></div>'
        htmlStr += '<div class=\'flex-column flex-1\'>'
        htmlStr += '<div class=\'flex-row justify-content-between align-items-center\'>'
        htmlStr += '<div class=\'comment-more-user fs13 ff600\'>' + Utils.dealUndefined(dataItem.userName) + '</div>'
        if (pm.userId === dataItem.userId) {
          htmlStr += '<div class=\'flex-row align-items-center comment-more-del-wrap\' onclick=\'Template.commentDel(' + JSON.stringify(jsonStr) + ')\' >'
          htmlStr += '<div class=\'comment-more-del\'></div>'
          htmlStr += '<div class=\'comment-more-del\'></div>'
          htmlStr += '<div class=\'comment-more-del\'></div>'
          htmlStr += '</div>'
        }
        htmlStr += '</div>'
        htmlStr += '<div class=\'comment-more-content fs15\'>' + Utils.dealUndefined(dataItem.content) + '</div>'
        dataItem.content = '' // 将内容置空
        //<!--评论时间及回复点赞-->
        htmlStr += '<div class=\'flex-row justify-content-between align-items-center fs12\'>'
        htmlStr += '<div class=\'comment-more-time\'>' + DateUtils.int2TimeDesc(dataItem.createDttm) + '</div>'
        htmlStr += '<div class=\'flex-row align-items-center\'>'
        htmlStr += '<span class=\'iconfont icondianzan fs16 ' + (dataItem.isLike ? 'comment-thumbsup-c' : '') + ' \' isLike=\'' + Utils.dealUndefined(dataItem.isLike) + '\'  onclick=\'fabulous(' + JSON.stringify(jsonStr) + ',this)\' ></span>'
        htmlStr += '<span class=\'ml5\'>' + Utils.dealUndefined(dataItem.thumbsupCnt) + ' </span>'
        if (pm.userId !== dataItem.userId) {// 评论人不能评论自己的评论
          htmlStr += '<span class=\'comment-more-reply-icon iconfont iconpinglun fs16\' onclick=\'writeComment(' + JSON.stringify(jsonStr) + ')\'></span>'
        }
        htmlStr += '</div>'
        htmlStr += '</div>'
        htmlStr += '</div>'
      }
      $('.comment-more-wrap').html(htmlStr)
    })
  }

  function getComments() {
    Server.commentMore.getComments({
      objectSource: pm.infoType,
      commentObjectId: pm.infoId,
      firstLevelId: pm.commentId,
      pageNum: pm.pageNum,
      pageSize: pm.pageSize
    }).then(function (data) {
      let htmlStr = ''
      if (data.list && data.list.length > 0) {
        pm.userId = data.id
        data.list.forEach(function (item) {
          htmlStr += '<div class=\'comment-more-reply-item flex-row pt30\'>'
          htmlStr += '<div class=\'comment-more-head mr10\'><img src=\'' + (item.headUrl ? item.headUrl : pm.defaultImg) + '\'/></div>'
          htmlStr += '<div class=\'flex-column flex-1\'>'
          htmlStr += '<div class=\'flex-row justify-content-between align-items-center\'>'
          htmlStr += '<div class=\'comment-more-user fs13 ff600\'>' + Utils.dealUndefined(item.userName) + '</div>'
          if (pm.userId === item.userId) {//只要自己才能删除自己
            htmlStr += '<div class=\'flex-row align-items-center comment-more-del-wrap\' onclick=\'Template.commentDel(' + JSON.stringify(item) + ')\' >'
            htmlStr += '<div class=\'comment-more-del\'></div>'
            htmlStr += '<div class=\'comment-more-del\'></div>'
            htmlStr += '<div class=\'comment-more-del\'></div>'
            htmlStr += '</div>'
          }
          htmlStr += '</div>'
          htmlStr += '<div class=\'comment-more-reply-content fs14\'>'
          // 如果不是直接评论的一级评论，则显示回复某某某
          if (!(item.parentId && item.parentId === pm.commentId)) {
            htmlStr += ' <span style=\'color: #2C68FF\'>回复</span>' + item.parentName + '： '
          }
          htmlStr += '<span>' + Utils.dealUndefined(item.content) + '</span>'
          htmlStr += '</div>'
          //评论时间及回复点赞
          htmlStr += '<div class=\'flex-row justify-content-between align-items-center fs12\'>'
          htmlStr += '<div class=\'comment-more-time\'>' + DateUtils.int2TimeDesc(item.createDttm) + '</div>'
          htmlStr += '<div class=\'flex-row align-items-center\'>'
          htmlStr += '<span class=\'iconfont icondianzan fs16 ' + (item.isLike ? 'comment-thumbsup-c' : '') + ' \' isLike=\'' + Utils.dealUndefined(item.isLike) + '\'  onclick=\'fabulous(' + JSON.stringify(item) + ',this)\' ></span>'
          htmlStr += '<span class=\'ml5\'> ' + Utils.dealUndefined(item.thumbsupCnt) + '</span>'
          if (pm.userId !== item.userId) {// 评论人不能评论自己的评论
            htmlStr += '<span class=\'comment-more-reply-icon iconfont iconpinglun fs16\' onclick=\'writeComment(' + JSON.stringify(item) + ')\'></span>'
          }
          htmlStr += '</div>'
          htmlStr += '</div>'

          htmlStr += '</div>'
          htmlStr += '</div>'
        })
      }

      if (data.list && data.list.length >= pm.pageSize) {
        pm.isScroll = true
      } else {
        $('.more').html('暂无更多数据')
        pm.isScroll = false
      }
      $('.comment-more-reply-wrap').append(htmlStr)

    })
  }


  function showInput(v) {
    if (v === 0) {//取消发布
      $('.comment-show').hide()
    } else if (v === 1) { //发布评论
      if (Utils.emojiJudge($('.comment-more .comment-content').val())){
        // 不允许输入表情
        jsBridge.callBridge('toast', {msg: '请勿输入表情'})
        return
      }else if ($('.comment-more .comment-content').val() && $('.comment-more .comment-content').val().trim()) {//如果有内容，则添加评论
        addCommentInfo()
        showInput(0)
      } else {//弹出内容不能为空
        jsBridge.callBridge('toast', {msg: '评论不能为空'})
      }
    }
  }


  //点赞
  function fabulous(item, o) {
    if (pm.isLogin) {
      let thumb = $(o).siblings(':first').text()

      if ($(o).attr('isLike') === '1') {
        item.isLike = '0'
        $(o).removeClass('comment-thumbsup-c')
        $(o).siblings('span').text((parseInt(thumb) - 1) ? (parseInt(thumb) - 1) : '')
      } else {
        item.isLike = '1'
        $(o).addClass('comment-thumbsup-c')
        $(o).siblings(':first').text((parseInt((Utils.notEmpty(thumb) ? thumb : 0)) + 1))
      }
      $(o).attr('isLike', item.isLike)
      Server.commentMore.updateThumbsupInfo({
        thumbupObjectId: item.commentId,
        objectSource: pm.infoType,
        datasource: pm.datasource,
        status: item.isLike
      }).then(function (data) {
        if (data.code === 0) {
          jsBridge.callBridge('toast', {msg: item.isLike === '1' ? '点赞成功' : '取消成功'})
        } else {
          jsBridge.callBridge('toast', {msg: '点赞失败'})
        }
      })
    } else {
      Utils.goLogin()
    }
  }

  // 添加评论
  function addCommentInfo() {
    Server.commentMore.addCommentInfo({
      commentObjectId: pm.infoId,
      objectSource: pm.infoType,
      datasource: pm.datasource, // 默认安卓
      parentId: pm.parentId ? pm.parentId : null,
      firstLevelId: pm.commentId,
      content: $('.comment-more .comment-content').val(),
    }).then(function (data) {
      if (data.code === 0) {
        //  jsBridge.callBridge('toast', { msg: '评论成功' })
        $('.comment-more .comment-content').val('')
        // 跳转到评论列表
        $('.comment-more-reply-wrap').html('')
        $('body').animate({scrollTop: 0}, 500)
        pm.pageNum = 1
        $('.more').hide()
        jsBridge.callBridge('toast', {msg: '评论成功'})
        getComments()

      } else {
        jsBridge.callBridge('toast', {msg: '评论失败'})
      }
    })
  }


  //评论与评论回复
  function writeComment(item) {
    if (pm.isLogin) {
      if (item) {
        pm.parentId = item.commentId
        $('.comment-more .comment-content').attr('placeholder', '回复' + item.userName)
      } else {
        pm.parentId = pm.commentId
        $('.comment-more .comment-content').attr('placeholder', '发表你的看法')
      }
      $('.comment-more .comment-show').show()
      $('.comment-content').focus()
    } else {
      Utils.goLogin()
    }
  }

  //评论删除
  function delComment(item) {
    if (pm.isLogin) {
      Server.commentMore.updateCommentStatus({
        commentObjectId: pm.infoId,
        commentId: item.commentId
      }).then(function (data) {
        if (data.code === 0) {
          cancleDel()
          jsBridge.callBridge('toast', {msg: '删除成功'})
          $('.comment-more-reply-wrap').html('')
          pm.pageNum = 1
          $('body').animate({scrollTop: 0}, 500)
          if (pm.commentId === item.commentId) {
            goCommentList({infoId: pm.infoId, infoType: pm.infoType})
          } else {
            getComments()
          }
        } else {
          jsBridge.callBridge('toast', {msg: '删除失败'})
        }
      })
    } else {
      Utils.goLogin()
    }

  }


</script>
</html>
